<script setup lang="ts">
import { ref } from 'vue';
import AuthBar from '@/components/authBar/index.vue';

const ratingList = ref([
  {
    id: '1',
    title: '您是否会推荐亲友来我院就诊?',
    type: 'radio',
    prop: 'a',
    options: [
      {
        label: '一定会',
        value: '1'
      },
      {
        label: '可能会',
        value: '2'
      },
      {
        label: '不确定',
        value: '3'
      },
      {
        label: '可能不会',
        value: '4'
      },
      {
        label: '不会',
        value: '5'
      }
    ]
  },
  {
    id: '2',
    title: '您是否愿意向身边的人推荐我院?',
    type: 'radio',
    prop: 'b',
    options: [
      {
        label: '一定会',
        value: '1'
      },
      {
        label: '可能会',
        value: '2'
      },
      {
        label: '不确定',
        value: '3'
      },
      {
        label: '可能不会',
        value: '4'
      },
      {
        label: '不会',
        value: '5'
      }
    ]
  },
  {
    id: '3',
    title: '院内是否有需要改善的地方?',
    type: 'checkbox',
    prop: 'c',
    options: [
      {
        label: '挂号流程',
        value: '1'
      },
      {
        label: '门诊大厅',
        value: '2'
      },
      {
        label: '诊室',
        value: '3'
      },
      {
        label: '检查室',
        value: '4'
      },
      {
        label: '药房',
        value: '5'
      },
      {
        label: '其他',
        value: '6'
      }
    ]
  },
  {
    id: '4',
    title: '院内哪些方面做得比较好?',
    type: 'checkbox',
    prop: 'd',
    options: [
      {
        label: '挂号流程',
        value: '1'
      },
      {
        label: '门诊大厅',
        value: '2'
      },
      { label: '诊室', value: '3' },
      {
        label: '检查室',
        value: '4'
      },
      {
        label: '药房',
        value: '5'
      }
    ]
  }
]);

const ratingModel = ref({});

function handleSelectRadio(rat, value) {
  if (rat.prop) {
    ratingModel.value[rat.prop] = value;
  }
}

function handleSelectCheckbox(rat, value) {
  if (rat.prop) {
    const arr = ratingModel.value[rat.prop];
    if (arr.includes(value)) {
      arr.splice(arr.indexOf(value), 1);
    }
    else {
      arr.push(value);
    }
  }
}

function handleNext() {
  uni.navigateTo({
    url: '/pages/satisfactionSurvey/feedback'
  });
}
</script>

<template>
  <view class="page flex-col">
    <AuthBar />
    <view class="flex-1 overflow-auto px-48 py-40 pb-60">
      <view class="page-content">
        <view class="page-title">
          选项调查
        </view>
        <view class="page-subtitle">
          请回答以下问题，帮助我们改进服务
        </view>

        <view class="page-rating">
          <!-- 评分项 -->
          <view v-for="(rat, index) in ratingList" :key="rat.id" class="rating-item mt-70">
            <view class="rating-item__hd">
              <view class="rating-item__title">
                {{ index + 1 }}.{{ rat.title }}
              </view>
            </view>
            <view class="rating-item__bd mt-40">
              <!-- radio -->
              <view v-if="rat.type === 'radio'" class="radio-group">
                <wd-row :gutter="16">
                  <wd-col v-for="opt in rat.options" :key="opt.value" :span="8">
                    <view class="radio-item" :class="{ active: ratingModel[rat.prop] === opt.value }" @click="handleSelectRadio(rat, opt.value)">
                      {{ opt.label }}
                    </view>
                  </wd-col>
                </wd-row>
              </view>

              <!-- checkbox -->
              <view v-if="rat.type === 'checkbox'" class="checkbox-group">
                <wd-checkbox-group v-model="ratingModel[rat.prop]">
                  <view
                    v-for="opt in rat.options" :key="opt.value" class="checkbox-item flex items-center"
                    @click="handleSelectCheckbox(rat, opt.value)"
                  >
                    <wd-checkbox :model-value="opt.value" @click="handleSelectCheckbox(rat, opt.value)" />
                    <view class="checkbox-item__label">
                      {{ opt.label }}
                    </view>
                  </view>
                </wd-checkbox-group>
              </view>
            </view>
          </view>
        </view>
      </view>

      <view class="flex-center">
        <view class="next-btn">
          <wd-button block @click="handleNext">
            下一步
          </wd-button>
        </view>
      </view>
    </view>
  </view>
</template>

<route type="page" lang="json5">
{
  layout: 'default',
  style: {
    navigationBarTitleText: '满意度调查',
    navigationStyle: 'custom'
  }
}
</route>

<style lang="scss" scoped>
.page {
  height: 100%;
  background: var(--bg-color);

  .page-content {
    background: rgba(222, 236, 255, 0.62);
    border-radius: 20px;
    border: 2px solid rgba(255, 255, 255, 0.5);
    padding: 30px 40px;

    .page-title {
      color: var(--text-color);
      font-size: 48px;
      font-weight: bold;
    }

    .page-subtitle {
      color: var(--secondary-text-color);
      font-size: 30px;
    }

    .rating-item {
      .rating-item__title {
        color: var(--text-color);
        font-size: 36px;
        font-weight: 500;
      }

      .radio-group {
        .radio-item {
          background: #fafcff;
          border-radius: 10px;
          font-size: 30px;
          font-weight: 600;
          color: #3d3d3d;
          margin-bottom: 20px;
          text-align: center;
          border: 2px solid rgba(255, 255, 255, 0.5);
          padding: 28px 0;
          box-sizing: border-box;

          &.active {
            color: #fff;
            background: var(--primary);
          }
        }
      }

      .checkbox-group {
        --wot-checkbox-size: 44px;
        --wot-checkbox-square-radius: 50%;
        --wot-checkbox-border-color: var(--primary);
        --wot-checkbox-icon-size: 32px;
        --wot-checkbox-margin: 0;

        :deep(.wd-checkbox-group) {
          background-color: transparent;
          width: 100%;
        }

        .checkbox-item {
          border-radius: 20px;
          background: #f5f9ff;
          border: 2px solid rgba(255, 255, 255, 0.5);
          margin-bottom: 20px;
          padding: 27px 30px;
        }

        .checkbox-item__label {
          color: var(--text-color);
          font-size: 32px;
          margin-left: 20px;
        }
      }
    }
  }

  .next-btn {
    width: 708px;
    --wot-button-medium-height: 124px;
    --wot-button-medium-fs: 42px;
    margin-top: 80px;

    :deep(.wd-button) {
      font-weight: bold;
    }
  }
}
</style>
